<div class="modal-header">
    <button type="button" class="close" ng-click="cancel()">&times;</button>
    <h4 class="modal-title">{{user.firstName+' '+user.lastName}}'s Groups</h4>
</div>
<div class="modal-body">

    <div class="row user-row" ng-repeat="group in userGroups.data | filter:query">
        <div class="col-xs-3 col-sm-2 col-md-1 col-lg-1">
            <img class="img-circle"
                 src="https://lh5.googleusercontent.com/-b0-k99FZlyE/AAAAAAAAAAI/AAAAAAAAAAA/eu7opA4byxI/photo.jpg?sz=32"
                 alt="User Pic">
        </div>
        <div class="col-xs-8 col-sm-9 col-md-10 col-lg-10">
            <strong>{{group.name}}</strong><br>
            <span class="text-muted">{{group.type}}</span>
        </div>
        <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 dropdown-user">
            <a ng-click="removeGroup(group)"> <i class="glyphicon glyphicon-remove text-muted"></i></a>
        </div>
    </div>


    <div class='container-fluid' ng-class="{'has-error': addUserError && selected.length>0}" style="padding-top: 10px;">
        <h4>Add groups</h4>
        <input placeholder="Type Group ID ..." type="text" ng-model="selected"
               typeahead="user.name for user in groups.data | filter:$viewValue | limitTo:8"
               typeahead-on-select='onSelect($item, $model, $label)'
               class="form-control">
    </div>

</div>

<div class="modal-footer">
    <button type="button" class="btn btn-default" ng-click="cancel();">Close</button>
</div>

